<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="altitude" content="6.724220275878906"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-11-05 15:48:46 +0000"/><meta name="latitude" content="31.37546034331494"/><meta name="longitude" content="121.493570120384"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2021-03-18 16:12:16 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day14：补充</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、混入 - mixin</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">当混入对象内有选项和组件内的选项重复时</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">函数类会被放在一个数组中，都会执行，混入对象内的函数先执行</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">对象类会被合并，重复的数据，以组件内部的数据为准</li>
</ul>
</li>
</ol>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// mixins.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> {
    created () {
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'mixins - created'</span>)
    },
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>: {
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">a</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">10</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">b</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'hello'</span>
    }
}
</code></pre>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 某组件</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> mixin <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./xxx/mixins.js'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> {
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">mixins</span>: [mixin],
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>: {
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">a</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'3.14'</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">c</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'components'</span>
    },
    created () {
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'components - created'</span>)
    }
}
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、keep-alive组件</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">&lt;keep-alive&gt; 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">&lt;keep-alive&gt; 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">当组件在 &lt;keep-alive&gt; 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">主要用于保留组件状态或避免重新渲染。</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">可以利用keep-alive实现记录首页滚动商品列表位置</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、插槽 - slot</h1>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><a href="https://cn.vuejs.org/v2/guide/components-slots.html" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">vue插槽的使用</a></p>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%20%E4%B8%80%E3%80%81%E6%B7%B7%E5%85%A5%20-%20mixin%0A1.%20%E6%B7%B7%E5%85%A5%20(mixin)%20%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E7%A7%8D%E9%9D%9E%E5%B8%B8%E7%81%B5%E6%B4%BB%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E6%9D%A5%E5%88%86%E5%8F%91%20Vue%20%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84%E5%8F%AF%E5%A4%8D%E7%94%A8%E5%8A%9F%E8%83%BD%E3%80%82%E4%B8%80%E4%B8%AA%E6%B7%B7%E5%85%A5%E5%AF%B9%E8%B1%A1%E5%8F%AF%E4%BB%A5%E5%8C%85%E5%90%AB%E4%BB%BB%E6%84%8F%E7%BB%84%E4%BB%B6%E9%80%89%E9%A1%B9%E3%80%82%E5%BD%93%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%B7%B7%E5%85%A5%E5%AF%B9%E8%B1%A1%E6%97%B6%EF%BC%8C%E6%89%80%E6%9C%89%E6%B7%B7%E5%85%A5%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%80%89%E9%A1%B9%E5%B0%86%E8%A2%AB%E2%80%9C%E6%B7%B7%E5%90%88%E2%80%9D%E8%BF%9B%E5%85%A5%E8%AF%A5%E7%BB%84%E4%BB%B6%E6%9C%AC%E8%BA%AB%E7%9A%84%E9%80%89%E9%A1%B9%E3%80%82%0A%0A2.%20%E5%BD%93%E6%B7%B7%E5%85%A5%E5%AF%B9%E8%B1%A1%E5%86%85%E6%9C%89%E9%80%89%E9%A1%B9%E5%92%8C%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E9%80%89%E9%A1%B9%E9%87%8D%E5%A4%8D%E6%97%B6%0A%20%20%20%20-%20%E5%87%BD%E6%95%B0%E7%B1%BB%E4%BC%9A%E8%A2%AB%E6%94%BE%E5%9C%A8%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E4%B8%AD%EF%BC%8C%E9%83%BD%E4%BC%9A%E6%89%A7%E8%A1%8C%EF%BC%8C%E6%B7%B7%E5%85%A5%E5%AF%B9%E8%B1%A1%E5%86%85%E7%9A%84%E5%87%BD%E6%95%B0%E5%85%88%E6%89%A7%E8%A1%8C%0A%20%20%20%20-%20%E5%AF%B9%E8%B1%A1%E7%B1%BB%E4%BC%9A%E8%A2%AB%E5%90%88%E5%B9%B6%EF%BC%8C%E9%87%8D%E5%A4%8D%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%BB%A5%E7%BB%84%E4%BB%B6%E5%86%85%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E4%B8%BA%E5%87%86%0A%0A%60%60%60js%0A%2F%2F%20mixins.js%0Aexport%20default%20%7B%0A%20%20%20%20created%20()%20%7B%0A%20%20%20%20%20%20%20%20console.log('mixins%20-%20created')%0A%20%20%20%20%7D%2C%0A%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20a%3A%2010%2C%0A%20%20%20%20%20%20%20%20b%3A%20'hello'%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0A%60%60%60js%0A%2F%2F%20%E6%9F%90%E7%BB%84%E4%BB%B6%0Aimport%20mixin%20from%20'.%2Fxxx%2Fmixins.js'%0Aexport%20default%20%7B%0A%20%20%20%20mixins%3A%20%5Bmixin%5D%2C%0A%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20a%3A%20'3.14'%2C%0A%20%20%20%20%20%20%20%20c%3A%20'components'%0A%20%20%20%20%7D%2C%0A%20%20%20%20created%20()%20%7B%0A%20%20%20%20%20%20%20%20console.log('components%20-%20created')%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0A%0A%23%20%E4%BA%8C%E3%80%81keep-alive%E7%BB%84%E4%BB%B6%0A1.%20%3Ckeep-alive%3E%20%E5%8C%85%E8%A3%B9%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E6%97%B6%EF%BC%8C%E4%BC%9A%E7%BC%93%E5%AD%98%E4%B8%8D%E6%B4%BB%E5%8A%A8%E7%9A%84%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E9%94%80%E6%AF%81%E5%AE%83%E4%BB%AC%E3%80%82%0A%0A2.%20%3Ckeep-alive%3E%20%E6%98%AF%E4%B8%80%E4%B8%AA%E6%8A%BD%E8%B1%A1%E7%BB%84%E4%BB%B6%EF%BC%9A%E5%AE%83%E8%87%AA%E8%BA%AB%E4%B8%8D%E4%BC%9A%E6%B8%B2%E6%9F%93%E4%B8%80%E4%B8%AA%20DOM%20%E5%85%83%E7%B4%A0%EF%BC%8C%E4%B9%9F%E4%B8%8D%E4%BC%9A%E5%87%BA%E7%8E%B0%E5%9C%A8%E7%BB%84%E4%BB%B6%E7%9A%84%E7%88%B6%E7%BB%84%E4%BB%B6%E9%93%BE%E4%B8%AD%E3%80%82%0A%0A3.%20%E5%BD%93%E7%BB%84%E4%BB%B6%E5%9C%A8%20%3Ckeep-alive%3E%20%E5%86%85%E8%A2%AB%E5%88%87%E6%8D%A2%EF%BC%8C%E5%AE%83%E7%9A%84%20activated%20%E5%92%8C%20deactivated%20%E8%BF%99%E4%B8%A4%E4%B8%AA%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%B0%86%E4%BC%9A%E8%A2%AB%E5%AF%B9%E5%BA%94%E6%89%A7%E8%A1%8C%E3%80%82%0A%0A4.%20%E4%B8%BB%E8%A6%81%E7%94%A8%E4%BA%8E%E4%BF%9D%E7%95%99%E7%BB%84%E4%BB%B6%E7%8A%B6%E6%80%81%E6%88%96%E9%81%BF%E5%85%8D%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%93%E3%80%82%0A%0A5.%20%E5%8F%AF%E4%BB%A5%E5%88%A9%E7%94%A8keep-alive%E5%AE%9E%E7%8E%B0%E8%AE%B0%E5%BD%95%E9%A6%96%E9%A1%B5%E6%BB%9A%E5%8A%A8%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8%E4%BD%8D%E7%BD%AE%0A%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E6%8F%92%E6%A7%BD%20-%20slot%0A%5Bvue%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8%5D(https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fcomponents-slots.html)%0A</center></body></html>